import React, { useEffect, useRef, useState } from "react";
import { Button, Card, SideBar } from "antd-mobile";
import "./css/Test.scss";
import { useNavigate } from "react-router-dom";
import PCMPlayer from "./lib/pcm-player";
import { Badge, Tabs, Avatar, Mask } from "antd-mobile";
import { CloseCircleOutline, AddOutline } from "antd-mobile-icons";
import util from "./common/Util";
import constants from "./common/Constants";
import image from "./12.jpeg";

function Test() {
  const navigate = useNavigate();
  const [imageUrl, setImageUrl] = useState();
  const canvasRef = useRef();

  const [arr, setArr] = useState([]);
  const [count, setCount] = useState(0);

  const tabs = [
    {
      key: "key1",
      title: "选项一",
      badge: Badge.dot,
    },
    {
      key: "key2",
      title: "选项二",
      badge: "5",
    },
    {
      key: "key3",
      title: "选项三",
      badge: "99+",
      disabled: true,
    },
  ];

  const [itemList, setItemList] = useState(tabs);

  let x = 0;
  x += 1;

  //点击
  const handleClick = () => {
    test2();
  };

  useEffect(() => {});

  const test1 = () => {
    const file = new File(["123456"], "11.txt");
    console.info(file);

    const fr = new FileReader();
    //读完回调
    fr.onload = (e) => {
      console.info("加载");
      console.info(fr.result);
      console.info(e.target.result);
    };
    fr.readAsArrayBuffer(file);
  };

  const test2 = async () => {
    const b = new Blob(["123"]);
    const dv = new DataView(await b.arrayBuffer());
    console.info(dv.getUint8(0));
    dv.setUint8(0, 69);
    console.info(dv);
    console.info(await new Blob([dv.buffer]).text());
  };
  const test3 = async () => {
    const result = (await window.showOpenFilePicker())[0];
    const file = await result.getFile();
  };
  const test4 = async () => {
    const result = (await window.showOpenFilePicker())[0];
    const file = await result.getFile();
    const url = URL.createObjectURL(file);
    setImageUrl(url);
    const image = new Image();
    image.width = 100;
    image.onload = () => {
      const context = canvasRef.current.getContext("2d");
      context.drawImage(image, 0, 0, 100, 100);
      const data = context.getImageData(0, 0, 100, 100);
      console.info(data);
      setColor(data);
      context.putImageData(data, 0, 0, 0, 0, data.width, data.height);
    };
    image.src = url;
  };
  const setColor = (imageData) => {
    let index = 0;
    while (true) {
      const red = imageData.data[index];
      const green = imageData.data[index + 1];
      const blue = imageData.data[index + 2];
      const ave = (red + green + blue) / 3;
      imageData.data[index] = ave;
      imageData.data[index + 1] = ave;
      imageData.data[index + 2] = ave;
      index += 4;
      if (index >= imageData.data.length) {
        break;
      }
    }
  };
  const clear = () => {
    setImageUrl("");
  };
  const test5 = async () => {
    console.info(canvasRef);
    const player = new PCMPlayer({
      encoding: "16bitInt",
      channels: 1,
      sampleRate: 44100,
      flushingTime: 2000,
    });
    const websocket = new WebSocket(
      "ws://192.168.1.49:7777/ws/test/audio?userId=112"
    );

    websocket.onopen = function (event) {
      console.log("WebSocket 连接已建立");
    };
    websocket.onmessage = async (data) => {
      const blob = data.data;
      const arrayBuffer = await blob.arrayBuffer();
      const dv = new DataView(arrayBuffer);
      const messageType = dv.getInt32(8);
      const payloadSize = dv.getInt32(64);

      const messageBody = new DataView(
        await blob.arrayBuffer(),
        64 + 4,
        payloadSize
      );
      const sendUserId = messageBody.getInt32(0);
      const receiveUserId = messageBody.getInt32(4);
      const dataSize = messageBody.getInt32(8);
      console.info(dataSize);

      const auidoData = new Uint8Array(
        arrayBuffer.slice(64 + 4 + 4 + 4 + 4, dataSize)
      );
      player.feed(auidoData);
      console.info(dv);
    };
    console.info(websocket);
  };
  const test6 = async () => {
    const b = new Blob([8, 9, 7]);
    const a = await b.arrayBuffer();
    const dv = new DataView(a);
    console.info(dv);
    console.info(dv.getInt8());
    const t = String.fromCharCode(dv.getInt8());
    console.info(typeof t);
  };

  const renderImage = () => {
    if (imageUrl) {
      return (
        <>
          <img src={imageUrl} style={{ width: "100px" }}></img>
          <br />
        </>
      );
    } else {
      return "不显示图片";
    }
  };
  const test7 = () => {
    setArr([
      {
        name: "张三",
        age: 12,
      },
      {
        name: "李四",
        age: 18,
      },
    ]);
  };
  const test8 = () => {
    setInterval(() => {
      arr[0].age += 1;
      arr[0].name = arr[0].name + "6";
      setArr([...arr]);
    }, 1000);
  };
  const test9 = () => {
    setCount(count + 1);
    console.info(x);
  };
  const ret = (
    <div>
      {renderImage()}
      <br />
      <canvas width={{ width: "100px" }} ref={canvasRef}></canvas>

      <Button onClick={test4}>点击测试</Button>
      <Button onClick={clear}>清空</Button>
      <Button onClick={test6}>查看</Button>
      <div style={{ background: "gray", width: "400px", padding: "20px" }}>
        <Card style={{ width: 350, margin: "20px" }} onClick={test6}>
          卡片内容
        </Card>
        <Card style={{ width: 180 }} onClick={test6}>
          卡片内容
        </Card>
      </div>
    </div>
  );
  const bb = () => {
    if (arr.length > 0) {
      return arr.map((item, index) => {
        return (
          <div key={index}>
            {item.name} {item.age}
          </div>
        );
      });
    } else {
      return <div>1111</div>;
    }
  };

  const ret2 = (
    <div>
      <Button onClick={test7}>设置</Button>
      <Button onClick={test8}>修改数组</Button>
      {bb()}
      <div>{count}</div>
      <Button onClick={test9}>点击加一</Button>
    </div>
  );
  const style = {
    color: "red",
    backgroundColor: "red",
  };

  const [activeKey, setActiveKey] = useState("key1");
  const click = (key, event) => {
    console.info(key);
    let newArr = itemList.filter((item) => {
      return item.key !== key;
    });
    console.info(newArr);
    setItemList([...newArr]);
    event.stopPropagation();
    return false;
  };
  const addTab = (e) => {
    let v = {
      key: "2222",
      title: "选项三222",
      badge: "99+",
      disabled: true,
    };

    setItemList([...itemList, v]);
  };
  const ret3 = (
    <div>
      <SideBar activeKey={activeKey} onChange={setActiveKey}>
        {itemList.map((item) => (
          <SideBar.Item
            key={item.key}
            title={
              <div>
                {item.title}
                <span
                  onClick={click.bind(this, item.key)}
                  style={{ paddingLeft: "10px", display: "inline-block" }}
                >
                  <CloseCircleOutline fontSize={18} />
                </span>
              </div>
            }
          />
        ))}
      </SideBar>
    </div>
  );
  const test11 = () => {};
  const demoAvatarImages = [
    "https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
    "https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9",
    "https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
    "https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
  ];
  const [arr2, setArr2] = useState([
    { name: "苹果", key: "1" },
    { name: "梨子", key: "2" },
  ]);
  const [activeKey2, setActiveKey2] = useState("2");
  const render2 = () => {};
  const change = (e) => {
    console.info(e);
    setActiveKey2(e);
  };
  const show = (e) => {
    alert(activeKey2);
  };
  const add = (e) => {
    setArr2([...arr2, { name: "橘子", key: util.guid() }]);
    e.stopPropagation();
  };

  const ret4 = (
    <div>
      <div>
        <Tabs stretch={false} activeKey={activeKey2} onChange={change}>
          {arr2.map((item) => {
            const ret = (
              <Tabs.Tab title={item.name} key={item.key}>
                {item.name}
                <Avatar
                  src={demoAvatarImages[1]}
                  style={{ "--size": "48px" }}
                />
              </Tabs.Tab>
            );
            return ret;
          })}
          <Tabs.Tab title={<AddOutline onClick={add} />} key={7878}></Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );

  const [ab5, setAb5] = useState(7);
  const [ab6, setAb6] = useState(6);
  useEffect(() => {
    console.info("ffff");
  }, []);
  useEffect(() => {
    console.info("meic");
  });

  useEffect(() => {
    console.info("ab5变化了");
  }, [ab5]);
  useEffect(() => {
    console.info("ab6变化了");
  }, [ab6]);
  const test51 = () => {
    setAb5(ab5 + 1);
  };
  const test52 = () => {
    setAb6(ab6 + 1);
  };
  const ret5 = (
    <div>
      <h1>ab5:{ab5}</h1>
      <button onClick={test51}>点击更新ab5</button>
      <h1>ab6:{ab6}</h1>
      <button onClick={test52}>点击更新ab6</button>
    </div>
  );

  const [o1, setO1] = useState([{ a: "123", b: 888 }]);

  const [m1, setMap1] = useState({ a: "123", b: 888 });

  const [m3, setMap3] = useState(
    new Map([
      ["a", "Onwwwwe"],
      ["b", "Two"],
    ])
  );

  const test61 = () => {
    console.info(process.env);
    console.info(constants);
    console.info(new EventSource("Ddwwwwdddd"));
  };

  useEffect(() => {}, []);
  const [tabConfig, setTabConfig] = useState({});
  const test62 = () => {
    let uuid = util.guid();
    tabConfig[uuid] = {
      name: "1111",
      key: uuid,
      list: [],
    };
    console.info(tabConfig);
    setTabConfig({ ...tabConfig });
  };

  const ret6 = (
    <div>
      <h1></h1>
      <button onClick={test61}>点击更新o1.b</button>
      <button onClick={test62}>挂载</button>
    </div>
  );

  const [test71_text, settTest71Text] = useState("");
  const test71 = () => {
    let token = util.getToken();
    util.postForm(
      constants.baseUrl + "/app/zpChat",
      { text: "你好哦", token },
      (e) => {
        settTest71Text(JSON.stringify(e));
      }
    );
  };

  const ret7 = (
    <div>
      <p>{test71_text}</p>

      <button onClick={test71}>点击</button>
    </div>
  );

  let t = useRef(null);
  let a = useRef(null);
  const ret81 = () => {
    console.info(a);
  };
  const ret8 = (
    <div>
      <button onClick={ret81}>点击</button>
    </div>
  );
  return ret8;
}

function Test2() {
  let [text, setText] = useState("");

  const add1 = () => {
    const source = new EventSource(
      constants.baseUrl +
        "/app/zhiPuChatBySSE?text=你好&token=" +
        util.getToken()
    );
    source.onmessage = (e) => {
      let o = JSON.parse(e.data);
      console.info(o);
      if (o.type === "add") {
        console.info("text", text);

        setText((e) => {
          let t = e + o.data;
          return t;
        });
      } else {
        setText((e) => {
          let t = e + "</br>";
          return t;
        });
      }
    };
    source.onerror = (error) => {
      console.info(error);
      console.info(EventSource.CLOSED);
      if (error.currentTarget.readyState === EventSource.CLOSED) {
        console.log("连接关闭");
      }
      source.close();
    };
  };
  const show = () => {
    console.info(text);
  };
  const ret1 = (
    <div>
      <p>{text}</p>
      <div>
        <button onClick={add1}>点击</button>
        <button onClick={show}>查看</button>
      </div>
    </div>
  );
  const re2 = <div id="test"></div>;

  return re2;
}

function Test3() {
  const ret = (
    <div className="Test">
      <div className="main">
        <div className="nav"></div>
        <div className="content">
          <Tabs stretch={false}>
            <Tabs.Tab title={"与乐乐的对话"} key={"a"}>
              <div className="inner-content">
                <div className="wapper">
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                  sdfa
                  f水电费阿斯兰代付款阿里斯顿会计法啦可视角度发生代理费水岸东方阿斯蒂芬
                </div>
              </div>
            </Tabs.Tab>
          </Tabs>
        </div>
        <div className="footer"></div>
      </div>
    </div>
  );
  return ret;
}
function Test4() {
  const click = () => {
    // 获取用户代理字符串
    var userAgent = navigator.userAgent;
    // 检查是否是Chrome内核(Blink)
    if (userAgent.indexOf("Chrome") > -1) {
      console.log("Chrome内核(Blink)");
    }
    // 检查是否是Safari内核(Webkit)
    else if (userAgent.indexOf("Safari") > -1) {
      console.log("Safari内核(Webkit)");
    }

    // 检查是否是Firefox内核(Gecko)
    else if (userAgent.indexOf("Firefox") > -1) {
      console.log("Firefox内核(Gecko)");
    }
    // 检查是否是IE内核(Trident)
    else if (userAgent.indexOf("Trident") > -1) {
      console.log("IE内核(Trident)");
    }
    // 检查是否是Opera内核(Presto)
    else if (userAgent.indexOf("Presto") > -1) {
      console.log("Opera内核(Presto)");
    }
    // 如果都不是
    else {
      console.log("未知内核");
    }
  };

  return (
    <div className="Test">
      <div className="s1">立即查看</div>
      <div className="box1">盒子1</div>
      <p className="p1">1111</p>
      <div class="box">这是一些内容</div>
      <div className="box2">
        s水电费啊上岛咖啡啦世纪东方立卡见识到了副科级啊双联单控菲拉斯看见对方雷克萨江东父老
      </div>
      <div className="nav2">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
        <a href="#">三个字</a>
      </div>
      <button onClick={click}>点击</button>
    </div>
  );
}

function Test5() {
  const click2 = () => {
    util.postJson(
      constants.baseUrl + "/app/chatCompletionPro?token=" + util.getToken(),
      {
        text: "不是还有个菩提老祖吗?",
        history: [
          { sender_type: "USER", sender_name: "小明", text: "你师父是谁？" },
          {
            sender_type: "BOT",
            sender_name: "AI孙悟空",
            text: "我的师傅是唐僧",
          },
        ],
      },
      {},
      (result) => {
        alert("1");
        console.info(result);
      }
    );
  };
  return (
    <div>
      <button onClick={click2}>点击请求</button>
    </div>
  );
}

function Test6() {
  const audioRef = useRef(null);

  const click2 = () => {
    const url = constants.baseUrl + "/app/mxTTS?token=" + util.getToken();

    let param = {
      text: "dddddddddd",
    };
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(param),
    })
      .then((response) => {
        console.info(response);
        let contentType = response.headers.get("Content-Type");
        if (contentType.indexOf("json") != -1) {
          return response.json();
        }
        return response.blob();
      })
      .then((ret) => {
        if (ret instanceof Blob) {
          console.info("返回成功:");
          audioRef.current.src = URL.createObjectURL(ret);
        } else if (ret instanceof Object) {
          console.info("返回错误", ret);
        }
      })
      .catch((e) => {
        console.error(e);
      });
  };
  return (
    <div className="Test">
      <div>
        <Button onClick={click2}>点击请求数据</Button>
      </div>
      <audio controls ref={audioRef}></audio>
      <p className="test-box">小猪佩奇</p>
    </div>
  );
}
function Test7() {
  return (
    <div className="Test">
      <div className="test7-box">
        <div className="test7-left"></div>
        <div className="test7-right">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
        </div>
      </div>
    </div>
  );
}

function Test8() {
  return (
    <div className="Test8">
      <div className="box"></div>
      <div className="triangle"></div>
      <div className="jd">
        <span></span>
      </div>
      <div className="test-middle">
        <img width={"100px"} height={"100px"} src={image}></img>1111111111111
      </div>
      <ul className="ab">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  );
}
export default Test8;
